<script lang="ts" setup>

import mockList from "@views/mobile/mock/app-h5-menu-mock";
import {randomColor} from "@utils/color-util";
import {defineComponent, onMounted, reactive, ref} from "vue";

let someThing = ref("")
let list = reactive(mockList);
defineComponent({
	name:"appH5Menu"
})
onMounted(() => {
    window["abcd"] = function (some) {
        console.log("数据类型:", typeof some);
        console.log("原始数据:", some);
        someThing.value = some;
    };

    list.forEach((item) => {
        item.list.forEach((subItem) => {
            subItem["color"] = randomColor();
        });
    });
})
</script>

<template>
    <div>
        <div style="margin: 5px; font-size: 20px">测试结果:{{ someThing }}</div>
        <div v-for="(item, index) in list" :hidden="!item.isShow">
            <div style="display: flex; align-items: center">
        <span
                style="
            margin: 0 5px 0 15px;
            display: inline-block;
            height: 20px;
            width: 4px;
          "
                :style="{ 'background-color': item.labelColor }"
        ></span>
                <span style="font-size: 24px">{{ item.name }}</span>
            </div>
            <template v-for="(subItem, index) in item.list">
                <el-button
                        v-if="!subItem.hidden"
                        style="margin: 5px"
                        type="primary"
                        @click="subItem.method"
                        :color="subItem.color"
                >{{ subItem.title }}
                </el-button>
            </template>
        </div>
    </div>
</template>

<style scoped lang="scss">
</style>

